<!DOCTYPE html>
<html>
<head>
	<title><?php echo $desc." | ".$title ?></title>
	<?php $this->load->view('assets-importer'); ?>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('asset/css/adm-style.css') ?>"/>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('asset/css/adm-media-queries.css') ?>"/>

	<!-- Google Map JS-->
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="<?php echo base_url('asset/js/markercluster.js') ?>"></script>
	<script type="text/javascript">
		var customIcons = {};

		function load(lati, longi, zm) {
			var cluster = [];
			var map = new google.maps.Map(document.getElementById("map-container"), {
				center: new google.maps.LatLng(lati, longi),
				zoom: zm,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			});
			var infoWindow = new google.maps.InfoWindow;

			downloadUrl("<?php echo base_url('asset/js/location.php') ?>", function(data) {
				var xml = data.responseXML;
				var markers = xml.documentElement.getElementsByTagName("marker");
				for (var i = 0; i < markers.length; i++) {
					var name = markers[i].getAttribute("name");
					var prov = markers[i].getAttribute("prov");
					var reg = markers[i].getAttribute("reg");
					var view = markers[i].getAttribute("view");
					var idkat = markers[i].getAttribute("idkat");
					var point = new google.maps.LatLng(
						parseFloat(markers[i].getAttribute("lat")),
						parseFloat(markers[i].getAttribute("lng")));
					var id = markers[i].getAttribute("id");
					var img = markers[i].getAttribute("img");
					var cat = markers[i].getAttribute("cat");
					var loc = markers[i].getAttribute("loc");
					var link = markers[i].getAttribute("link");

					var html = "<div class='popup-marker'><img src='<?php echo base_url('asset/img/posts-image') ?>/"+img+"' width='100%' height='auto'/> <a class='map-title' href='<?php echo site_url('post/show') ?>/"+link+"' target='_blank'>"+name+"</a></h3> </div>";
					var icon = customIcons[idkat] || {};
					var marker = new google.maps.Marker({
						map: map,
						position: point,
						icon: icon.icon
					});
					bindInfoWindow(marker, map, infoWindow, html);
					google.maps.event.addListener(marker, 'click', (function(marker, i) {
						return function() {
							infowindow.setContent("Info on member here");
							infowindow.open(map, marker);
						}
					})(marker, i));
					cluster.push(marker);
				}
				var mc = new MarkerClusterer(map, cluster);
			});
		}

		function bindInfoWindow(marker, map, infoWindow, html) {

			google.maps.event.addListener(marker, 'click', function() {
				infoWindow.setContent(html);
				infoWindow.open(map, marker);
			});
		}

		function downloadUrl(url, callback) {
			var request = window.ActiveXObject ?
			new ActiveXObject('Microsoft.XMLHTTP') :
			new XMLHttpRequest;

			request.onreadystatechange = function() {
				if (request.readyState == 4) {
					request.onreadystatechange = doNothing;
					callback(request, request.status);
				}
			};

			request.open('GET', url, true);
			request.send(null);
		}

		function doNothing() {
		}
	</script>
</head>
<body onload="load(-7.7955798, 110.36948959999995, 13)">
	<?php $this->load->view('admin/adm_nav'); ?>

	<div id="adm-outer">
		<?php $this->load->view('admin/adm_menu'); ?>
		<div id="adm-page-title"><?php echo $page_title ?></div>
		<div id="adm-main-content">
			<?php 
			$notif = $this->session->flashdata('notif');
			$status = $this->session->flashdata('notif_status');
			?>

			<?php if($status != ""): ?>
				<?php if($status == "0"): ?>
					<div class="notif notif-gagal"><?php echo $notif ?></div>
				<?php endif; ?>
				<?php if($status == "1"): ?>
					<div class="notif notif-sukses"><?php echo $notif ?></div>
				<?php endif; ?>
			<?php endif; ?>
			<?php $this->load->view("admin/pages/$page"); ?>
		</div>
	</div>
</body>
</html>